<template>
    <div class="alarm-settings">


        <!-- 区域列表 -->
        <el-row :gutter="20">
            <el-col :span="10">
                <el-card style="height: 100%;">
                    <!-- 搜索区域名称或监测参数 -->
                    <el-input placeholder="搜索区域名称或监测参数" v-model="searchQuery" style="width: 100%;">
                        <template #append>
                            <el-button icon="Search" @click="handleSearch"></el-button>
                        </template>
                    </el-input>

                    <div class="bench-button">
                        <div>
                            <el-button>批量启用</el-button>
                            <el-button>批量禁用</el-button>
                            <el-button type="danger" plain>批量删除</el-button>
                        </div>
                        <el-button type="primary" icon="Plus" @click="addAreaAlarmFormVisible = true">新增区域报警</el-button>
                    </div>
                    <div class="grid-content bg-purple-light">
                        <el-table :data="regionData" stripe style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="name" align="center" label="区域名称"></el-table-column>
                            <el-table-column prop="status" align="center" label="状态">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.status"
                                        @change="handleStatusChange(scope.row)"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="triggerCount" align="center" label="触发次数"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template #default="scope">
                                    <div class="actions">
                                        <el-icon color="#5f9bf8">
                                            <EditPen />
                                        </el-icon>
                                        <p></p>
                                        <el-icon color="#e36c75">
                                            <Delete />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="14">
                <div class="grid-content bg-purple-light">
                    <el-card>
                        <h3>报警规则设置</h3>
                        <el-form ref="formRef" :model="form" label-width="80px">
                            <el-form-item label="监测参数">
                                <el-select v-model="form.monitorParam" placeholder="请选择监测参数">
                                    <el-option v-for="option in monitorOptions" :key="option.value"
                                        :label="option.label" :value="option.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="下限值">
                                <el-input v-model="form.lowerLimit" placeholder="请输入下限值"></el-input>
                            </el-form-item>
                            <el-form-item label="上限值">
                                <el-input v-model="form.upperLimit" placeholder="请输入上限值"></el-input>
                            </el-form-item>
                            <el-form-item label="范围">
                                <el-radio-group v-model="form.range">
                                    <el-radio :label="1">大于上限</el-radio>
                                    <el-radio :label="2">小于下限</el-radio>
                                    <el-radio :label="3">超出范围</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                        <div>
                            <el-button plain @click="handleSubmit" icon="Plus" style="width: 100%;">添加检测参数</el-button>
                        </div>
                    </el-card>
                    <!-- 推送设置 -->
                    <el-card style="margin-top: 20px;">
                        <div class="grid-content bg-purple-light">
                            <h3>推送设置</h3>
                            <el-form ref="pushFormRef" :model="pushForm" label-width="80px">
                                <el-form-item label="接收人">
                                    <el-input v-model="pushForm.receiver" placeholder="请输入接收人"></el-input>
                                </el-form-item>
                                <el-form-item label="推送方式">
                                    <el-checkbox v-model="pushForm.sms">短信</el-checkbox>
                                    <el-checkbox v-model="pushForm.email">邮件</el-checkbox>
                                    <el-checkbox v-model="pushForm.message">站内信</el-checkbox>
                                </el-form-item>
                                <el-form-item label="推送频率">
                                    <el-radio-group v-model="pushForm.frequency">
                                        <el-radio :label="1">即时推送</el-radio>
                                        <el-radio :label="2">间隔推送</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="handlePushSubmit">保存设置</el-button>
                                </el-form-item>
                            </el-form>
                            <div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <!-- 操作记录 -->
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card>
                    <div class="grid-content bg-purple-light">
                        <h3>操作记录</h3>
                        <el-table :data="operationRecords" stripe style="width: 100%">
                            <el-table-column prop="time" label="操作时间"></el-table-column>
                            <el-table-column prop="type" label="操作类型"></el-table-column>
                            <el-table-column prop="operator" label="操作人"></el-table-column>
                            <el-table-column prop="content" label="操作内容"></el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- Add monitoring quantity -->
        <el-dialog v-model="addAreaAlarmFormVisible" align-center title="新增区域报警" width="700">
            <!-- <el-steps style="" :active="stepActive" finish-status="success" simple>
                <el-step title="Step 1" />
                <el-step title="Step 2" />
                <el-step title="Step 3" />
            </el-steps> -->
            <el-steps :active="stepActive" style="width: 700px;margin-top: 10px;" align-center>
                <el-step title="Step 1" />
                <el-step title="Step 2" />
                <el-step title="Step 3" />
            </el-steps>
            <div class="area-alarm-dialog-content" v-show="stepActive === 1">
                <el-form ref="formRef" :model="addAreaAlarmForm" :rules="rules" status-icon>
                    <el-form-item label="检测量名称" label-width="100" prop="name">
                        <el-input placeholder="请输入检测量名称" v-model="addAreaAlarmForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" label-width="100" prop="description">
                        <el-input v-model="textarea2" style="" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea"
                            placeholder="请输入描述" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="area-alarm-dialog-content" v-show="stepActive === 2">
                <div class="active_2">
                    <el-form ref="formRef" :model="addAreaAlarmForm" :rules="rules" status-icon>
                        <el-form-item label="检测参数" label-width="100" prop="name">
                            <el-select v-model="addAreaAlarmForm.parameter" placeholder="Select">
                                <el-option v-for="item in monitorOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="阈值范围" label-width="100" prop="description">
                            <div class="el-input-group">
                                <el-input v-model="input" style="width: 200px" placeholder="上限值" />
                                <p>至</p>
                                <el-input v-model="input" style="width: 200px" placeholder="下限值" />
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button plain @click="handleSubmit" icon="Plus" style="width: 100%;">添加检测参数</el-button>
                </div>
            </div>
            <div class="area-alarm-dialog-content" v-show="stepActive === 3">
                <el-form ref="pushFormRef" :model="pushForm" label-width="80px">
                    <el-form-item label="接收人">
                        <el-input v-model="pushForm.receiver" placeholder="请输入接收人"></el-input>
                    </el-form-item>
                    <el-form-item label="推送方式">
                        <el-checkbox v-model="pushForm.sms">短信</el-checkbox>
                        <el-checkbox v-model="pushForm.email">邮件</el-checkbox>
                        <el-checkbox v-model="pushForm.message">站内信</el-checkbox>
                    </el-form-item>
                    <el-form-item label="推送频率">
                        <el-radio-group v-model="pushForm.frequency">
                            <el-radio :label="1">即时推送</el-radio>
                            <el-radio :label="2">间隔推送</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <div v-show="stepActive == 1">
                        <el-button type="primary" @click="stepActive += 1">下一步</el-button>
                    </div>
                    <div v-show="stepActive == 2">
                        <el-button @click="stepActive -= 1">上一步</el-button>
                        <el-button type="primary" @click="stepActive += 1">下一步</el-button>
                    </div>
                    <div v-show="stepActive == 3">
                        <el-button @click="stepActive -= 1">上一步</el-button>
                        <el-button type="primary" @click="submitForm(formRef)">
                            确认
                        </el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 数据定义
const searchQuery = ref('');
const regionData = ref([
    { id: 1, name: '东区供水管网', status: true, triggerCount: 5 },
    { id: 2, name: '西区水质监测', status: false, triggerCount: 2 },
    { id: 3, name: '南区压力检测', status: true, triggerCount: 8 }
]);
const stepActive = ref(1);
const addAreaAlarmFormVisible = ref(false);
const addAreaAlarmForm = ref({
    name: '',
    description: '',
    lowerLimit: '',
    range: 1
});
// 表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入检测量名称', trigger: 'blur' }
    ],
    upperlimit: [
        { required: true, message: '请输入上限值', trigger: 'blur' }
    ],
    lowerlimit: [
        { required: true, message: '请输入下限值', trigger: 'blur' }
    ]
});
const form = ref({
    monitorParam: '',
    lowerLimit: '',
    upperLimit: '',
    range: 1
});

const monitorOptions = ref([
    { value: 'param1', label: '参数1' },
    { value: 'param2', label: '参数2' },
    { value: 'param3', label: '参数3' }
]);

const pushForm = ref({
    receiver: '',
    sms: false,
    email: false,
    message: false,
    frequency: 1
});

const operationRecords = ref([
    { time: '2024-01-20 14:30:25', type: '新增', operator: '张明', content: '新增东区供水管网报警规则' },
    { time: '2024-01-20 15:45:12', type: '修改', operator: '李华', content: '修改西区水质监测阈值设置' }
]);

// 方法定义
function handleSearch() {
    console.log('Searching:', searchQuery.value);
}

function handleStatusChange(row) {
    console.log('Status changed for', row);
}

function handleEditRegion(row) {
    console.log('Editing region:', row);
}

function handleDeleteRegion(row) {
    console.log('Deleting region:', row);
}

function handleSubmit() {
    console.log('Form submitted:', form.value);
}

function handlePushSubmit() {
    console.log('Push settings submitted:', pushForm.value);
}
</script>

<style scoped>
.bench-button {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.area-alarm-dialog-content {
    margin-top: 20px;
    margin-bottom: 40px;
}

.el-input-group {
    display: flex;
    height: 40px;
    align-items: center;

    >p {
        margin: 0 10px;
    }
}

.active_2 {
    /* border虚线 */
    border: 2px dashed #f2f3f5;
    padding-top: 20px;
    margin-bottom: 20px;
    padding-right: 30px;
    border-radius: 8px;
}
</style>